<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view>
		<u-toast ref="uToast" />
		<common :tips='commonTips'></common>
		<!-- 顶部搜索栏-start -->
		<view class="search-box">
			<u-search @search="search()" v-model="keywords" @custom="search()" class="search-box-u-search"
				shape="square" placeholder="搜索其实很简单" :clearabled="true" :show-action="false"></u-search>
			<view @click="searchButton" class="search-button">{{showSearchPopup ? '关闭':'搜索'}}</view>
		</view>
		<!-- 顶部搜索栏-end -->
		<!-- 联系人-start -->
		<u-checkbox-group v-if="!showSearchPopup">
			<u-index-list :scrollTop="scrollTop" :indexList="indexList">
				<view v-for="(item, index) in indexList" :key="index">
					<u-index-anchor :index="item" />
					<view v-for="(friend,friendIdx) in friends[item]" :key="friendIdx" class="address-item">
						<u-checkbox shape="circle" v-model="friend.checked" :name="friend.friend_id">
							<view class="address-checkbox">
								<image class="address-avatar" :src="friend.avatar" mode="widthFix"></image>
								<view class="address-info">{{friend.nickname}}</view>
							</view>
						</u-checkbox>
					</view>
				</view>
			</u-index-list>
		</u-checkbox-group>
		<!-- 联系人-end -->

		<u-checkbox-group v-if="showSearchPopup">
			<view v-for="(friend, friendIdx) in searchRes" :key="friendIdx" class="address-item">
				<u-checkbox @change="searchFriendChange" shape="circle" v-model="friend.checked" :name="friend.id">
					<view class="address-checkbox">
						<image class="address-avatar" :src="friend.avatar" mode="widthFix"></image>
						<view class="address-info">{{friend.nickname}}</view>
					</view>
				</u-checkbox>
			</view>
		</u-checkbox-group>

		<view class="footer-box"></view>

		<view class="pick-done">
			<u-button @click="pickDone" type="primary">选择完成</u-button>
		</view>
		
		<u-modal v-model="show" title="输入群发文字" confirm-text="立即群发" :show-cancel-button="true" @confirm="send">
			<view class="slot-content">
				<u-input v-model="content" type="textarea" :clearable="false" :focus="true" :custom-style="{'margin': '20px'}" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	var sessionId = 0
	export default {
		data() {
			return {
				info: {},
				show: false,
				content: '',
				action: '',
				keywords: '',
				scrollTop: 0,
				indexList: [],
				friends: [],
				searchRes: [],
				showSearchPopup: false,
				preselection: 0,
				messageId: 0,
				forwardType: '',
				commonTips: ''
			}
		},
		onLoad(query) {
			var that = this
			that.action = query.action ? query.action : ''
			that.preselection = query.preselection ? query.preselection:0
			that.messageId = query.message_id ? query.message_id:0
			that.forwardType = query.forward_type ? query.forward_type:'message'
			sessionId = query.sessionId ? query.sessionId:0

			var title = '选择好友'
			switch (that.action) {
				case 'create-group':
					title = '选择好友创建群聊'
					break;
				case 'invitation-groupmember':
					title = '邀请好友加入群聊'
					break;
				case 'message-forward':
					title = '选择好友转发消息'
					break;
			}
			
			uni.setNavigationBarTitle({
				title: title
			});
			this.ws.pageFun(this.pageDataLoad, this);
		},
		onShow() {
			this.ws.checkNetwork(this)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			send() {
				if(this.content == '') {
					uni.showToast({
						title: '内容不能为空~',
						icon: 'error'
					})
					return false
				}
				uni.showToast({
					title: '正在发送...',
					icon: 'none'
				})
				let message = this.content
				this.content = ''
				for (var i in this.friends) {
					for (let y in this.friends[i]) {
						if (this.friends[i][y].checked) {
							let friend_id = this.friends[i][y].friend_id
							let messageId = new Date().getTime() + friend_id + Math.floor(Math.random() * 10000);
							this.ws.pageFun(() => {
								this.ws.send({
									c: 'Message',
									a: 'sendMessage',
									data: {
										message: message,
										type: 'default',
										session_id: 'friend_id',
										friend_id: friend_id,
										tokens: this.ws.initializeData ? this.ws.initializeData.tokens : false,
										message_id: messageId,
										identity: this.ws.initializeData.userinfo.identity,
										at_users: []
									}
								})
							}, this)
						}
					}
				}
				setTimeout(() => {
					uni.showToast({
						title: '正在成功~',
						icon: 'success'
					})
				}, 2000);
			},
			searchButton: function() {
				if (this.showSearchPopup) {
					this.showSearchPopup = false
				} else {
					this.search()
				}
			},
			pageDataLoad: function() {
				this.ws.send({
					c: 'User',
					a: 'loadContact',
					data: {
						'method': 'all-friend'
					}
				})
			},
			search: function() {
				var that = this
				if (!that.keywords) {
					that.showSearchPopup = false
					return;
				}
				that.ws.pageFun(function() {
					that.ws.send({
						c: 'User',
						a: 'search',
						data: {
							'keyword': that.keywords,
							'method': 'friends',
							'type': 'pick-user'
						}
					})
				}, that)
			},
			searchFriendChange: function(e) {
				for (let i in this.friends) {
					for (let y in this.friends[i]) {
						if (this.friends[i][y].friend_id == e.name) {
							this.friends[i][y].checked = e.value
						}
					}
				}
			},
			pickDone: function() {
				var that = this, userIdStr = ''
				for (var i in that.friends) {
					for (let y in that.friends[i]) {
						if (that.friends[i][y].checked) {
							userIdStr += that.friends[i][y].friend_id + ','
						}
					}
				}
				// if (!userIdStr) {
				// 	that.$refs.uToast.show({
				// 		title: '请选择好友~',
				// 		type: 'error'
				// 	})
				// 	return false;
				// }
				
				if (that.action == 'create-group') {
					uni.navigateTo({
						url: '/pages/center/edit-info?type=create-group&ids=' + userIdStr
					})
				} else if (that.action == 'batch-message') {
					this.show = true;
				} else if (that.action == 'invitation-groupmember') {
					that.ws.invitationGroupmemberSelected = userIdStr
					uni.navigateBack({
						delta: 1
					})
				} else if (that.action == 'message-forward') {
					if (!that.messageId) {
						that.$refs.uToast.show({
							title: '要转发的消息找不到啦,请重试~',
							type: 'error'
						})
						return false;
					}
					
					that.ws.pageFun(function(){
						that.ws.send({
							c: 'Message',
							a: 'forward',
							data: {
								pickuser: userIdStr,
								message_ids: that.messageId,
								type: that.forwardType,
								session_id: sessionId
							}
						})
					}, that)
				}
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	.search-box {
		display: flex;
		align-items: center;
		padding: 20rpx 4vw;
		background: #FFFFFF;
	}

	.search-box .search-box-u-search {
		flex: 1;
	}

	.search-button {
		font-size: 30rpx;
		padding-left: 30rpx;
	}

	.address-item {
		height: 120rpx;
		display: flex;
		align-items: center;
		padding: 0rpx 4vw;
	}

	.address-checkbox {
		display: flex;
		align-items: center;
		width: 620rpx;
		padding-left: 10rpx;
	}

	.address-avatar {
		height: 80rpx;
		width: 80rpx;
		border-radius: 16rpx;
	}

	.address-info {
		height: 120rpx;
		line-height: 120rpx;
		margin-left: 20rpx;
		font-size: 32rpx;
	}

	.footer-box {
		display: block;
		height: 140rpx;
		width: 100vw;
	}

	.pick-done {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F2F3F4;
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 20rpx;
	}

	.pick-done button {
		display: block;
		width: 300rpx;
	}
</style>
